<template>
  <splitpanes class="default-theme lab-view-layout lab-view-designer" @resize="leftWidth = $event[0].size" >
    <pane min-size="0" :size="leftWidth" max-size="100">
      <excel-template-table ref="tableRef" @rowClick="tableClick" />
    </pane>
    <pane min-size="0" :size="100 - leftWidth" max-size="100">
      <el-empty v-if="datasource.length === 0" description="未打开模板"></el-empty>
      <el-tabs v-else v-model="activeName" closable @tab-remove="tabRemove" class="lab-database-tab">
        <el-tab-pane v-for="option in datasource" :key="option.excelId" :label="option.excelName" :name="option.excelId">
          <excel-template :excel-template="option" />
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>
<script>
import {Pane, Splitpanes} from "splitpanes";
import ExcelTemplateTable from "@/views/bl/ExcelTemplateTable.vue";
import ExcelTemplate from "@/views/bl/ExcelTemplate.vue";
/**
 * <p>
 * 作用描述
 * </p>
 *
 * @author 62688
 * @since  2024/4/27 22:04
 */
export default {
  name: "ExcelTemplateManage",
  components:{ExcelTemplate, ExcelTemplateTable, Splitpanes, Pane },
  data() {
    return {
      leftWidth: 20,
      datasource: [],
      activeName: ''
    }
  },
  methods: {
    tableClick(row) {
      if (!row.excelId) {
        return
      }
      const index = this.datasource.findIndex(item => item.excelId === row.excelId)
      if (index < 0) {
        this.datasource.splice(0, 0, row)
      } else {
        this.datasource.splice(index, 1, row)
      }
      this.activeName = row.excelId
    },
    tabRemove(name) {
      const index = this.datasource.findIndex(item => item.excelId === name)
      if (index >= 0) {
        this.datasource.splice(index, 1)
      }
      if (this.datasource.length > 0) {
        this.activeName = this.datasource[0].excelId
      } else {
        this.activeName = ''
      }
    }
  }
}
</script>

<style scoped>

</style>